<template>
  <div class="bottom-view">
    <div class="views">
      <el-card shadow="hover" :body-style="{ padding: 0 }">
        <template #header>
          <div class="title-wrap">关键词搜索</div>
        </template>
        <div class="chart-wrapper">
          <div class="chart-inner">
            <div class="chart">
              <div class="chart-title">搜索用户数</div>
              <div class="chart-data">93,634</div>
              <vue-chart :options="searchUserOption" />
            </div>
            <div class="chart">
              <div class="chart-title">搜索量</div>
              <div class="chart-data">198,734</div>
              <vue-chart :options="searchUserOption" />
            </div>
          </div>
          <div class="table-wrapper">
            <el-table :data="tableData">
              <el-table-column prop="rank" label="排名" />
              <el-table-column prop="keyword" label="关键词" />
              <el-table-column prop="count" label="总搜索量" />
              <el-table-column prop="users" label="用户数" />
              <el-table-column prop="range" label="访问次数" />
            </el-table>
            <el-pagination
              layout="prev,pager,next"
              :total="0"
              :page-size="pageSize"
              background
              @current-change="onPageChange"
            />
          </div>
        </div>
      </el-card>
    </div>
    <div class="views">
      <el-card shadow="hover" :body-style="{ padding: 0 }">
        <template #header>
          <div class="title-wrap">
            <div class="title">分类销售排行</div>
            <div class="radio-wrapper">
              <el-radio-group v-model="radioSelect" size="small">
                <el-radio-button label="品类"></el-radio-button>
                <el-radio-button label="商品"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </template>
        <div class="chart-wrapper">
          <vue-chart :options="categoryOption" />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  name: 'BottomView',
  data() {
    return {
      searchUserOption: {
        xAxis: {
          type: 'category',
          boundaryGap: false // 取消X轴边距
        },
        yAxis: {
          show: false,
          min: 0,
          max: 300
        },
        series: [
          {
            type: 'line',
            data: [100, 150, 200, 250, 140, 156, 176, 189],
            areaStyle: {
              color: 'rgba(95,187,255.5)'
            },
            lineStyle: {
              color: 'rgb(95,187,255)'
            },
            itemStyle: {
              opacity: 0 // 折线点透明度
            },
            smooth: true // 平滑展示曲线
          }
        ],
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        }
      },
      searchNumberOption: {},
      tableData: [
        { id: 1, rank: 1, keyword: '北京', count: 100, users: 90, range: 90 },
        { id: 2, rank: 2, keyword: '成都', count: 123, users: 23, range: 50 },
        { id: 3, rank: 3, keyword: '杭州', count: 512, users: 42, range: 40 },
        { id: 4, rank: 4, keyword: '厦门', count: 523, users: 52, range: 20 }
      ],
      radioSelect: '品类',
      categoryOption: {},
      pageSize: 4
    }
  },
  methods: {
    onPageChange(page) {
      console.log(page, 'page')
    },
    renderPieChart() {
      const mockData = [
        {
          legendname: '粉面粥店',
          value: 67,
          parcent: '15.40%',
          itemStyle: {
            color: '#e7e702'
          },
          name: '粉面粥店' // legend 对应
        },
        {
          legendname: '简餐便当',
          value: 97,
          parcent: '22.30%',
          itemStyle: {
            color: '#8d7fec'
          },
          name: '简餐便当 | 22.30%' // legend 对应
        },
        {
          legendname: '汉堡披萨',
          value: 92,
          parcent: '21.15%',
          itemStyle: {
            color: '#5085f2'
          },
          name: '汉堡披萨' // legend 对应
        }
      ]
      this.categoryOption = {
        title: [
          {
            text: '品类分布',
            textStyle: {
              fontSize: 14,
              color: '#666'
            },
            left: 20,
            top: 20
          },
          {
            text: '累计订单量', // 标题
            subtext: '320', // 副标题
            x: '34.5%', // 横坐标
            y: '42.5%', // 纵坐标
            textStyle: {
              fontSize: 14,
              color: '#999'
            },
            subtextStyle: {
              fontSize: 28,
              color: '#333'
            },
            textAlign: 'center' // 居中
          }
        ],
        series: [
          {
            type: 'pie',
            data: mockData,
            label: {
              normal: {
                show: true,
                // position: 'inner', // 内部显示标题 legendname
                formatter: function (params) {
                  return params.data.legendname
                }
              }
            },
            center: ['35%', '50%'], // 图形位置
            // 半径 - 内半径（圆心到达内圈） 外半径（圆心到达外圈）
            radius: ['45%', '60%'], // 默认0 75
            // label 标题 连接的线段
            labelLine: {
              normal: {
                length: 5,
                length2: 10, // 靠近文字的
                smooth: true
              }
            },
            clockwise: true, // 顺时针排列
            // 边距 每个图形的间距
            itemStyle: {
              borderWidth: 4,
              borderColor: '#fff'
            }
          }
        ],
        legend: {
          type: 'scroll', // 可滑动
          orient: 'vertical', // 垂直
          height: 250,
          left: '70%',
          top: 'middle', // 垂直居中
          textStyle: {
            color: '#888'
          }
        },
        // 鼠标移入展示详情数据
        tooltip: {
          trigger: 'item', // 表示鼠标移入子项可触发，默认
          formatter: function (params) {
            // marker 自动生成的圆点
            const str =
              params.seriesName +
              '<br/>' +
              params.marker +
              params.data.legendname +
              '<br/>' +
              '数量：' +
              params.data.value +
              '<br/>' +
              '占比：' +
              params.data.parcent
            return str
          }
        }
      }
    }
  },
  mounted() {
    this.renderPieChart()
  }
}
</script>
<style lang="scss" scoped>
.bottom-view {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 创建两列 */
  grid-gap: 20px; /* 定义行与行之间的间距 */
  margin-top: 20px;
  .views {
    .title-wrap {
      display: flex;
      align-items: center;
      height: 60px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      font-weight: 500;
      padding: 0 0 0 20px;

      .radio-wrapper {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-right: 20px;
      }
    }
    .chart-wrapper {
      display: flex;
      height: 452px;
      flex-direction: column;
      .chart-inner {
        display: flex;
        padding: 0 10px;
        margin-top: 20px;
        .chart {
          flex: 1;
          padding: 0 10px;
          .chart-title {
            color: #999;
            font-size: 14px;
          }
          .chart-data {
            font-size: 22px;
            color: #333;
            font-weight: 500;
            letter-spacing: 2px;
          }
          .echarts {
            height: 50px;
          }
        }
      }
      .table-wrapper {
        flex: 1;
        margin-top: 20px;
        padding: 0 20px 20px;

        .el-pagination {
          display: flex;
          justify-content: flex-end;
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
